<template>
	<div>
		<v-header :headerLeftText="leftText" :headerCenterText="headerText"></v-header>
		<div class="container">
			<!--轮播图-->
			<div>
				<v-lunbo :bannerList="bList" :src='src'></v-lunbo>
			</div>
			<div class="descrip_wrap">
				<p class="f_size26b f_color line_height15">{{goodDatail.goodsName}}</p>
				<div class="price_wrap">
					<span class="tehui_price bgd_color f_size26b">特惠价</span>&nbsp;
					<span class="f_size32 f_color2">&#65509;{{goodDatail.price}}</span>&nbsp;&nbsp;
					<span class="f_size20 f_color_gray">市场价：</span>
					<span class="f_size20 f_color_gray text_dec_lineth">&yen;{{goodDatail.origin}}</span>
				</div>
			</div>
			<div class="nav_wrap">
				<router-link to="/">
					<div class="left">
						<img src="../static/images/home_cion.png" />
						<span>首页</span>
					</div>
				</router-link>
				<router-link :to="{name: 'Order', query: {sta: 0}}">
					<div class="left">
						<img src="../static/images/order_icon.png" />
						<span class="f_size24">订单</span>
					</div>
				</router-link>
				<router-link to="/shopcar">
					<div class="left">
						<img src="../static/images/car_icon.png" />
						<span class="f_size24">购物车</span>
					</div>
				</router-link>
				<router-link to="/set">
					<div class="left">
						<img src="../static/images/set_icon.png" />
						<span class="f_size24">设置</span>
					</div>
				</router-link>
			</div>
			<div class="goods_detail_img_wrap" v-html="goodDatail.goodsDetail">

			</div>
			<div class="button_wrap">
				<div @click='addShopcar' class="left bgd_color_btn1">
					<img src="../static/images/car_icon.png" />
					<span>加入购物车</span>
				</div>
				<router-link :to="{name: 'Settle', query: {goodsId: this.goodsId, nums: 1}}">
					<div class="left bgd_color">
						<img src="../static/images/money_icon.png" />
						<span>立即购买</span>
					</div>
				</router-link>
			</div>
		</div>
		<router-link :to="{name: 'EvaluateList', query: {gid: goodsId}}">
			<div class="position_fixed pingjia_in_btn">
				<div class="pingjia_nums">
					{{evaluateNum}}
				</div>
				<div class="pingjia_text">
					评价
				</div>
			</div>
		</router-link>
	</div>
</template>

<script>
	import VueAwesomeSwiper from 'vue-awesome-swiper'
	import 'swiper/dist/css/swiper.css'

	export default {
		created() {
			var self = this
			self.$api.get('/front/base/banners', null, r => {
				console.log('轮播图r', r)
				self.bList = r.data.list
			})
			self.$api.get('/front/base/goodsDetail', null, r => {
				console.log('商品详情', r)
				self.goodDatail = r.data.list[0]
				self.goodsId = r.data.list[0].goodsId
				self.$api.get('/front/base/rates', {
					gid: self.goodsId
				}, re => {
					console.log('商品评价信息', re)
					self.evaluateNum = re.data.dataCount
				})
			})

		},
		data() {
			return {
				leftText: '返回',
				headerText: '顺芝堂',
				src: this.$src,
				bList: [],
				goodDatail: {},
				goodsId: 0,
				evaluateNum: 0,
			}
		},

		methods: {
			addShopcar: function() {
				this.$api.post('/front/carts', {
					goodsId: this.goodsId
				}, r => {
					console.log('r', r)
					if(r === '添加成功') {
						Toast(r.data)
					}
				})
			},
			purchase: function() {
				var self = this
				this.$api.post('/front/carts', {
					goodsId: this.goodsId
				}, r => {
					console.log('r', r)
					self.$router.replace({
						path: 'settle'
					})
				})
			}
		}
	}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
	.header {
		background: #000000;
	}
	
	.container {
		padding-top: 0px;
	}
	
	.button_wrap {
		position: fixed;
		width: 100%;
		bottom: 0;
	}
	
	.container {
		margin-top: 80px;
		margin-bottom: 88px;
	}
	
	.swiper-wrapper img {
		width: 100%;
		height: 360px;
	}
</style>